<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签云 - 克苏鲁秘语</title>
  <script src="js/tailwindcss.js"></script>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: '#8B5CF6',
            secondary: '#EC4899',
            accent: '#10B981',
            dark: '#111827',
            light: '#F9FAFB',
            mythic: {
              50: '#F3F4F6',
              100: '#E5E7EB',
              200: '#D1D5DB',
              300: '#9CA3AF',
              400: '#6B7280',
              500: '#4B5563',
              600: '#374151',
              700: '#1F2937',
              800: '#111827',
              900: '#030712',
            },
            cosmic: {
              50: '#F5F3FF',
              100: '#EDE9FE',
              200: '#DDD6FE',
              300: '#C4B5FD',
              400: '#A78BFA',
              500: '#8B5CF6',
              600: '#7C3AED',
              700: '#6D28D9',
              800: '#5B21B6',
              900: '#4C1D95',
            }
          },
          fontFamily: {
            mythos: ['Georgia', 'serif'],
            cosmic: ['"Arial Narrow"', 'sans-serif'],
          },
          backgroundImage: {
            'mythic-pattern': "url('https://picsum.photos/id/1048/1200/800')",
            'cosmic-void': "url('https://picsum.photos/id/1019/1200/800')",
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'glow': 'glow 2s ease-in-out infinite alternate',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            },
            glow: {
              '0%': { textShadow: '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6' },
              '100%': { textShadow: '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6' },
            }
          }
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .text-shadow-glow {
        text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
      }
      .bg-blur {
        backdrop-filter: blur(8px);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .animate-float-slow {
        animation: float 8s ease-in-out infinite;
      }
    }
  </style>
</head>
<body class="bg-mythic-50 dark:bg-mythic-900 text-mythic-800 dark:text-mythic-100 transition-colors duration-300 font-mythos">
  <!-- 导航栏 -->
  <header class="fixed w-full top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between bg-white/80 dark:bg-mythic-800/80 bg-blur">
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-2xl text-primary dark:text-cosmic-400 font-bold animate-pulse-slow">
          <i class="fa fa-eye"></i>
        </span>
        <span class="text-xl font-cosmic tracking-wider">克苏鲁秘语</span>
      </a>
      
      <!-- 桌面导航 -->
      <nav class="hidden md:flex items-center space-x-8">
        <a href="index.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">首页</a>
        <a href="tags.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">标签云</a>
        <a href="search.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">搜索</a>
        <a href="about.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300">关于</a>
      </nav>
      
      <!-- 移动端菜单按钮 -->
      <button class="md:hidden text-2xl" id="menu-toggle">
        <i class="fa fa-bars"></i>
      </button>
      
      <!-- 主题切换按钮 -->
      <button id="theme-toggle" class="ml-4 p-2 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-700 transition-colors duration-300">
        <i class="fa fa-moon-o dark:hidden"></i>
        <i class="fa fa-sun-o hidden dark:inline-block"></i>
      </button>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-mythic-800">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">首页</a>
        <a href="tags.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">标签云</a>
        <a href="search.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">搜索</a>
        <a href="about.html" class="hover:text-primary dark:hover:text-cosmic-400 transition-colors duration-300 py-2">关于</a>
      </div>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="container mx-auto px-4 pt-24 pb-16">
    <!-- 页面标题 -->
    <section class="mb-12 text-center">
      <h1 class="text-[clamp(1.75rem,5vw,3rem)] font-bold text-primary dark:text-cosmic-400 mb-4">标签云</h1>
      <p class="text-lg text-mythic-600 dark:text-mythic-300 max-w-3xl mx-auto">探索与埃及希腊神话、克苏鲁相关的各类主题标签，发现更多感兴趣的内容。</p>
    </section>
    
    <!-- 标签云 -->
    <section class="bg-white dark:bg-mythic-800 p-8 rounded-2xl shadow-lg mb-12">
      <div class="flex flex-wrap justify-center gap-4">
        <a href="#" class="px-6 py-3 bg-primary/10 dark:bg-cosmic-600/20 text-primary dark:text-cosmic-400 rounded-full hover:bg-primary hover:text-white dark:hover:bg-cosmic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="egyptian-mythology">
          埃及神话 (24)
        </a>
        <a href="#" class="px-6 py-3 bg-secondary/10 dark:bg-secondary/20 text-secondary dark:text-secondary-400 rounded-full hover:bg-secondary hover:text-white dark:hover:bg-secondary transition-all duration-300 transform hover:scale-105 tag-item" data-tag="greek-mythology">
          希腊神话 (18)
        </a>
        <a href="#" class="px-6 py-3 bg-accent/10 dark:bg-accent/20 text-accent dark:text-accent-400 rounded-full hover:bg-accent hover:text-white dark:hover:bg-accent transition-all duration-300 transform hover:scale-105 tag-item" data-tag="cthulhu">
          克苏鲁 (32)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="great-old-ones">
          旧日支配者 (16)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="occultism">
          神秘学 (19)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="archaeology">
          考古学 (12)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="myth-comparison">
          神话对比 (15)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="forbidden-knowledge">
          禁忌知识 (11)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="mystic-texts">
          神秘典籍 (9)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="cosmic-mysteries">
          宇宙奥秘 (13)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="ancient-civilizations">
          古文明 (17)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="semiotics">
          符号学 (8)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="star-spawn">
          星之眷族 (7)
        </a>
        <a href="#" class="px-6 py-3 bg-mythic-100 dark:bg-mythic-700 text-mythic-600 dark:text-mythic-300 rounded-full hover:bg-mythic-200 dark:hover:bg-mythic-600 transition-all duration-300 transform hover:scale-105 tag-item" data-tag="rituals">
          仪式 (6)
        </a>
      </div>
    </section>

    <!-- 标签文章列表容器 -->
    <section id="tag-articles" class="max-w-4xl mx-auto bg-white dark:bg-mythic-800 p-8 rounded-2xl shadow-lg hidden">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-primary dark:text-cosmic-400" id="tag-title">相关文章</h2>
        <button id="clear-tag" class="text-mythic-500 dark:text-mythic-400 hover:text-primary dark:hover:text-cosmic-400 transition-colors">
          <i class="fa fa-times-circle mr-1"></i> 清除选择
        </button>
      </div>
      <div id="articles-container" class="space-y-6">
        <!-- 文章列表将通过JavaScript动态生成 -->
      </div>
      <div id="no-articles-message" class="text-center py-12 hidden">
        <i class="fa fa-search text-5xl text-mythic-300 dark:text-mythic-600 mb-4 block"></i>
        <p class="text-mythic-500 dark:text-mythic-400">没有找到相关文章</p>
      </div>
    </section>
  </main>

  <!-- 添加主题切换脚本 -->
  <script>
    // 主题切换功能
    const themeToggle = document.getElementById('theme-toggle');
    const htmlElement = document.documentElement;
    const mobileMenu = document.getElementById('mobile-menu');
    const menuToggle = document.getElementById('menu-toggle');

    // 检查本地存储中的主题偏好
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      htmlElement.classList.add('dark');
    } else {
      htmlElement.classList.remove('dark');
    }

    // 主题切换按钮点击事件
    themeToggle.addEventListener('click', () => {
      htmlElement.classList.toggle('dark');
      localStorage.theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
    });

    // 移动端菜单切换
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });

    // 标签云交互功能
    document.addEventListener('DOMContentLoaded', () => {
      const tagItems = document.querySelectorAll('.tag-item');
      const tagArticlesSection = document.getElementById('tag-articles');
      const tagTitleElement = document.getElementById('tag-title');
      const articlesContainer = document.getElementById('articles-container');
      const noArticlesMessage = document.getElementById('no-articles-message');
      const clearTagButton = document.getElementById('clear-tag');
      let activeTag = null;

      // 模拟文章数据
      const tagArticles = {
        'egyptian-mythology': [
          { title: '古埃及神话中的太阳神拉', excerpt: '探索古埃及神话中太阳神拉的起源与象征意义，以及他在埃及宗教中的重要地位...', date: '2023-10-15', url: 'article.html' },
          { title: '埃及神话中的冥界审判', excerpt: '解析古埃及神话中奥西里斯主持的冥界审判仪式和亡灵书的重要性...', date: '2023-09-22', url: 'article.html' },
          { title: '金字塔与埃及神话的联系', excerpt: '探讨埃及金字塔建筑与神话信仰之间的密切关系...', date: '2023-08-05', url: 'article.html' }
        ],
        'greek-mythology': [
          { title: '奥林匹斯十二主神的故事', excerpt: '介绍希腊神话中奥林匹斯十二主神的起源与主要神话故事...', date: '2023-10-02', url: 'article.html' },
          { title: '赫拉克勒斯的十二项功绩', excerpt: '详细解读赫拉克勒斯完成的十二项艰巨任务及其象征意义...', date: '2023-09-18', url: 'article.html' }
        ],
        'cthulhu': [
          { title: '克苏鲁神话体系解析', excerpt: '深入探讨H.P.洛夫克拉夫特创造的克苏鲁神话体系的基本框架...', date: '2023-10-10', url: 'article.html' },
          { title: '旧日支配者与外神的区别', excerpt: '解析克苏鲁神话中旧日支配者与外神的分类及其代表神明...', date: '2023-09-05', url: 'article.html' },
          { title: '《克苏鲁的呼唤》中的宇宙恐怖', excerpt: '分析《克苏鲁的呼唤》中体现的宇宙恐怖元素与哲学思想...', date: '2023-08-20', url: 'article.html' },
          { title: '克苏鲁神话在现代流行文化中的影响', excerpt: '探讨克苏鲁神话对电影、游戏和文学等现代流行文化的影响...', date: '2023-07-15', url: 'article.html' }
        ],
        // 其他标签的文章数据可以继续添加
      };

      // 点击标签处理函数
      const handleTagClick = (e) => {
        e.preventDefault();
        const tagElement = e.currentTarget;
        const tagName = tagElement.textContent.trim().split(' ')[0];
        const tagId = tagElement.getAttribute('data-tag');
        const articles = tagArticles[tagId] || [];

        // 更新活动标签样式
        if (activeTag) {
          activeTag.classList.remove('ring-2', 'ring-offset-2', 'ring-primary', 'dark:ring-cosmic-500');
        }
        tagElement.classList.add('ring-2', 'ring-offset-2', 'ring-primary', 'dark:ring-cosmic-500');
        activeTag = tagElement;

        // 更新标题
        tagTitleElement.textContent = `${tagName}相关文章`;

        // 清空文章容器
        articlesContainer.innerHTML = '';

        // 显示文章或无结果消息
        if (articles.length > 0) {
          noArticlesMessage.classList.add('hidden');
          articles.forEach(article => {
            const articleElement = document.createElement('div');
            articleElement.className = 'p-6 border border-mythic-200 dark:border-mythic-700 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1';
            articleElement.innerHTML = `
              <h3 class="text-xl font-bold mb-2 text-primary dark:text-cosmic-400"><a href="${article.url}">${article.title}</a></h3>
              <p class="text-mythic-600 dark:text-mythic-300 mb-4">${article.excerpt}</p>
              <div class="flex justify-between items-center">
                <span class="text-sm text-mythic-500 dark:text-mythic-400">发布日期: ${article.date}</span>
                <a href="${article.url}" class="text-primary dark:text-cosmic-400 hover:underline">阅读更多</a>
              </div>
            `;
            articlesContainer.appendChild(articleElement);
          });
        } else {
          noArticlesMessage.classList.remove('hidden');
        }

        // 显示文章列表区域
        tagArticlesSection.classList.remove('hidden');

        // 平滑滚动到文章列表
        tagArticlesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      };

      // 清除标签选择
      const clearTagSelection = () => {
        if (activeTag) {
          activeTag.classList.remove('ring-2', 'ring-offset-2', 'ring-primary', 'dark:ring-cosmic-500');
          activeTag = null;
        }
        tagArticlesSection.classList.add('hidden');
      };

      // 为所有标签添加点击事件
      tagItems.forEach(tag => {
        tag.addEventListener('click', handleTagClick);
      });

      // 清除选择按钮事件
      clearTagButton.addEventListener('click', clearTagSelection);
    });
  </script>
</body>
</html>